<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" media="screen" href="js/jQuery/ui-1.8.16/css/redmond/jquery-ui-1.8.16.custom.css" />
		<script type="text/javascript" src="js/jQuery/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/jQuery/ui-1.8.16/js/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript" src="js/jQuery/ui-1.8.16/development-bundle/ui/i18n/jquery.ui.datepicker-zh-CN.js" ></script>
		
		<style type="text/css">
			html, body {
				width:		100%;
				height:		100%;					
				padding:	0;
				margin:		0;
				overflow:	auto; /* when page gets too small */
				font-size: 12px;
			}
			
			#dialog label, #dialog input { display:block; }
			#dialog label { margin-top: 0.5em; }
			#dialog input, #dialog textarea { width: 95%; }
		</style>
		
		<script type="text/javascript">
			var $j = jQuery.noConflict();
			
			$j(function() {
				$j("#addBtn").button().click(function() {
					$dialog.dialog("open");
				});

				$j("#delBtn").button().click(function() {
					var selRows = $j("#tbody :checked");
					var ids = '';
					for(var i = 0; i < selRows.length; i++) {
						ids += selRows[i].value + ",";
					}
					deleteUser(ids);
				});

				function loadTable() {
					$j("#tbody").html('');
					$j.ajax({
						url: './basic/DataController/searchUsers.action',
						data: {},
						type: 'POST',
						dataType: 'json',
						success: function(rspdata, status) {
							if(rspdata.result != 'success')
								return;

							for(var i = 0; i < rspdata.data.length; i++) {
								var newRow = '<tr>' +
												'<td> <input type="checkbox" value="' + rspdata.data[i].id + '"></input></td>' +
												'<td>' + rspdata.data[i].id + '</td>' +
												'<td>' + rspdata.data[i].name + '</td>' +
												'<td>' + rspdata.data[i].email + '</td>' +
											'</tr>'
								$j("#tbody").append(newRow);
							}
						}
					});
				}

				function addUser(data) {
					$j.ajax({
						url: './basic/DataController/addUser.action',
						data: data,
						type: 'POST',
						dataType: 'json',
						success: function(rspdata, status) {
							if(rspdata.result == 'success') {
								loadTable();
								$j("#dialog").dialog( "close" );
							}
						}
					});
				}

				function deleteUser(userIds) {
					$j.ajax({
						url: './basic/DataController/deleteUser.action',
						data: {ids: userIds},
						type: 'POST',
						dataType: 'json',
						success: function(rspdata, status) {
							if(rspdata.result == 'success') {
								loadTable();
							}
						}
					});
				}

				$j("#allChk").click(function() {
					var isChecked = $j(this).attr("checked") == 'checked';
					$j("#tbody input:checkbox").attr("checked",isChecked);
				});

				$j("#input_birthday").datepicker({dateFormat: 'yy-mm-dd' });
				
				var $dialog = $j("#dialog").dialog({
					autoOpen: false,
					modal: true,
					buttons: {
						Add: function() {
							var name = $j("#input_name").val();
							var email = $j("#input_email").val();
							var data = {name: name, email: email};
							addUser(data);
						},
						Cancel: function() {
							$j(this).dialog( "close" );
						}
					},
					open: function() {
					},
					close: function() {
						$j("form", $dialog).get(0).reset();
					}
				});

				loadTable();
			});
		
		</script>
	</head>
	
	<body>
		<button id="addBtn">NEW</button><button id="delBtn">DELETE</button>
		<table width="100%" border="1">
			<thead>
				<tr>
					<th width="30"><input id="allChk" type="checkbox"></input></th>
					<th>ID</th>
					<th>name</th>
					<th>email</th>
				</tr>
			</thead>
			<tbody id="tbody">
				
			</tbody>
		</table>
		
		<div id="dialog" title="NEW Dialog">
			<form>
				<fieldset class="ui-helper-reset">
					<label for="tab_title">Name</label>
					<input type="text" name="input_name" id="input_name" value="name"/>
					<label for="tab_content">age</label>
					<input type="text" name="input_email" id="input_email" value="email"/>
					<label for="tab_content">birthDay</label>
					<input type="text" name="input_birthday" id="input_birthday" value="1985-06-01"/>
				</fieldset>
			</form>
		</div>
	</body>

</html>